/**
 * 表单项组件样式
 * @description 自定义表单项组件的样式定义
 */

.formItem {
  /* 基础样式 */
  position: relative;
}

/* 必填字段样式 */
.formItem.required :global(.ant-form-item-label > label::before) {
  content: '*';
  color: #ff4d4f;
  font-size: 14px;
  margin-right: 4px;
  display: inline-block;
}

/* 禁用状态 */
.formItem.disabled {
  opacity: 0.6;
}

.formItem.disabled :global(.ant-form-item-label > label) {
  color: #bfbfbf;
  cursor: not-allowed;
}

/* 只读状态 */
.formItem.readonly :global(.ant-form-item-control-input) {
  cursor: default;
}

.formItem.readonly :global(.ant-form-item-control-input-content) {
  pointer-events: none;
}

/* 不同尺寸 */
.formItem.small :global(.ant-form-item-label) {
  font-size: 12px;
  line-height: 1.4;
  min-height: 24px;
}

.formItem.small :global(.ant-form-item-control-input) {
  min-height: 24px;
}

.formItem.large :global(.ant-form-item-label) {
  font-size: 16px;
  line-height: 1.5;
  min-height: 40px;
  font-weight: 500;
}

.formItem.large :global(.ant-form-item-control-input) {
  min-height: 40px;
}

/* 标签内容样式 */
.labelContent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 标签提示样式 */
.labelTooltip {
  color: #8c8c8c;
  font-size: 12px;
  cursor: help;
  transition: color 0.3s ease;
}

.labelTooltip:hover {
  color: #1890ff;
}

.formItem.hasTooltip :global(.ant-form-item-label) {
  position: relative;
}

/* 描述信息样式 */
.description {
  color: #8c8c8c;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 4px;
  padding: 0;
}

.formItem.small .description {
  font-size: 11px;
}

.formItem.large .description {
  font-size: 13px;
  margin-top: 6px;
}

.formItem.hasDescription :global(.ant-form-item-extra) {
  margin-top: 0;
}

/* 表单项间距调整 */
.formItem :global(.ant-form-item-control) {
  line-height: 1.5;
}

.formItem :global(.ant-form-item-control-input) {
  display: flex;
  align-items: flex-start;
}

.formItem :global(.ant-form-item-control-input-content) {
  flex: 1;
  min-width: 0;
}

/* 错误状态增强 */
.formItem :global(.ant-form-item-has-error .ant-form-item-explain) {
  animation: errorShake 0.3s ease-in-out;
}

@keyframes errorShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(2px);
  }
}

/* 成功状态样式 */
.formItem :global(.ant-form-item-has-success .ant-form-item-explain) {
  color: #52c41a;
}

.formItem :global(.ant-form-item-has-success::after) {
  content: '✓';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #52c41a;
  font-size: 14px;
  pointer-events: none;
}

/* 警告状态样式 */
.formItem :global(.ant-form-item-has-warning .ant-form-item-explain) {
  color: #faad14;
}

.formItem :global(.ant-form-item-has-warning::after) {
  content: '!';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #faad14;
  font-size: 14px;
  font-weight: bold;
  pointer-events: none;
}

/* 验证中状态 */
.formItem :global(.ant-form-item-is-validating::after) {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid #1890ff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  pointer-events: none;
}

@keyframes spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .formItem :global(.ant-form-item-label) {
    text-align: left;
    padding-bottom: 4px;
  }

  .formItem.small :global(.ant-form-item-label) {
    min-height: 20px;
  }

  .formItem.large :global(.ant-form-item-label) {
    min-height: 32px;
  }

  .labelTooltip {
    font-size: 11px;
  }

  .description {
    font-size: 11px;
  }
}

/* 深色主题适配 */
[data-theme='dark'] .labelTooltip {
  color: #8c8c8c;
}

[data-theme='dark'] .labelTooltip:hover {
  color: #177ddc;
}

[data-theme='dark'] .description {
  color: #8c8c8c;
}

[data-theme='dark'] .formItem.disabled :global(.ant-form-item-label > label) {
  color: #595959;
}

[data-theme='dark'] .formItem :global(.ant-form-item-has-success::after) {
  color: #49aa19;
}

[data-theme='dark'] .formItem :global(.ant-form-item-has-warning::after) {
  color: #d89614;
}

[data-theme='dark'] .formItem :global(.ant-form-item-is-validating::after) {
  border-color: #177ddc;
  border-top-color: transparent;
}

/* 表单项聚焦状态 */
.formItem :global(.ant-form-item-control-input:focus-within) {
  /* 可以添加聚焦时的特殊样式 */
}

/* 表单项悬停状态 */
.formItem:hover :global(.ant-form-item-label > label) {
  color: #1890ff;
  transition: color 0.3s ease;
}

[data-theme='dark'] .formItem:hover :global(.ant-form-item-label > label) {
  color: #177ddc;
}

/* 紧凑布局 */
.formItem.compact {
  margin-bottom: 12px;
}

.formItem.compact :global(.ant-form-item-label) {
  padding-bottom: 2px;
}

.formItem.compact .description {
  margin-top: 2px;
}

/* 宽松布局 */
.formItem.spacious {
  margin-bottom: 32px;
}

.formItem.spacious :global(.ant-form-item-label) {
  padding-bottom: 8px;
}

.formItem.spacious .description {
  margin-top: 8px;
}

/* 内联表单项 */
.formItem.inline {
  display: inline-block;
  margin-right: 16px;
  margin-bottom: 0;
  vertical-align: top;
}

.formItem.inline :global(.ant-form-item-label) {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 0;
}

.formItem.inline :global(.ant-form-item-control) {
  display: inline-block;
}

/* 表单项分组 */
.formItem.grouped {
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  padding: 16px;
  background-color: #fafafa;
}

.formItem.grouped :global(.ant-form-item-label > label) {
  font-weight: 600;
  color: #262626;
}

[data-theme='dark'] .formItem.grouped {
  border-color: #303030;
  background-color: #1a1a1a;
}

[data-theme='dark'] .formItem.grouped :global(.ant-form-item-label > label) {
  color: #d9d9d9;
}